<template>
  <div class="header_box">
    <img
      class="logo"
      referrerpolicy="no-referrer"
      src="https://www.diantangkeji.com:8084/static/20250510/b7a9781e861f456c82cdd402dd82af1b.png"
    />
    <div class="tabs">
      <div
        class="tabs_text"
        :class="{ tabs_text_color: Current == index }"
        @click="setTabs(index, item.value)"
        v-for="(item, index) in tabsList"
        :key="index"
      >
        {{ item.name }}
      </div>
      <div class="moveTitle" v-if="showTabs">
        <div
          @click="setTabs(21, 6)"
          :class="{ tabs_text_color: Current == 21 }"
          class="tabs_text"
        >
          科研资料
        </div>
        <div
          @click="setTabs(22, 4)"
          :class="{ tabs_text_color: Current == 22 }"
          class="tabs_text"
        >
          科研绘图
        </div>
        <div
          @click="setTabs(23, 5)"
          :class="{ tabs_text_color: Current == 23 }"
          class="tabs_text"
        >
          PPT润色
        </div>
      </div>
    </div>
    <div class="search" @click="setTabs(8)">
      <Input
        readonly
        style="width: 100%"
        search
        enter-button
        v-model="search.name"
        placeholder="搜索关键词"
      ></Input>
    </div>
  </div>
</template>
<script>
export default {
  name: "header",
  props: {
    Current: {
      type: Number,
      default: function () {
        return 0;
      },
    },
  },
  watch: {
    // 监听 prop 的变化，以更新本地的 data 属性
    setMum(newVal) {
      this.Current = newVal;
    },
  },
  data() {
    return {
      showTabs: false,
      search: {},
      tabsList: [
        {
          name: "首页",
          value: 0,
        },
        {
          name: "论文辅导",
          value: 20,
        },
        {
          name: "人才项目",
          value: 2,
        },
        {
          name: "海外优青",
          value: 1,
        },
        {
          name: "国自然",
          value: 3,
        },
        {
          name: "其他服务",
          value: "",
        },
        // {
        //   name: "科研资料",
        //   value: 6,
        // },
        // {
        //   name: "科研绘图",
        //   value: 4,
        // },
        // {
        //   name: "PPT润色",
        //   value: 5,
        // },
      ],
    };
  },
  methods: {
    setTabs(indx, value) {
      if (indx == 5 && value == "") {
        this.showTabs = true;
        return;
      }
      this.Current = indx;
      if (value == undefined) {
        this.$emit("CurrentSelection", indx, indx);
      } else {
        this.$emit("CurrentSelection", indx, value);
      }
    },
  },
};
</script>

<style scoped>
.header_box {
  margin: 0 auto;
  width: 1920px;
  height: 90px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}
.logo {
  width: 220px;
  height: 54px;
  margin: 0 68px 0 158px;
}
.tabs {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.moveTitle {
  position: absolute;
  z-index: 999;
  top: 90px;
  right: 0px;
  background-color: #ffffff;
}
.tabs_text {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 22px;
  padding: 23px;
  color: #000;
  cursor: pointer;
}
.tabs_text_color {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 22px;
  color: #0365fe;
  padding: 23px;
  border-bottom: 4px solid #0365fe;
  cursor: pointer;
}
.search {
  cursor: pointer;
  width: 280px;
  height: 55px;
  margin: 0 100px 0 127px;
  display: flex;
  align-items: center;
}
</style>
